﻿@using System.Collections.ObjectModel
@model ColorSelectorMVC.Models.SettingsModel

@{
    ViewBag.Title = "Color Selector";
}


<div class="clearfix center">
    <h1 data-bind="with: selectedColor">My favorite color is <b data-bind="style: { color: Value }, text: Text"></b></h1>
    <div class="sub-section"  data-bind="with: selectedColor">
        <img data-bind="style: { background: Value }" src="~/Images/connections_large.png"/>
    </div>
    <div class="sub-section">
        
        <h2>Color settings for @Html.DisplayFor(model => model.UserName)</h2>        

        <div class="editor-label">
            @Html.LabelFor(model => model.SelectedColor)
        </div>
        @Html.DropDownList("Colors", new Collection<SelectListItem>(),
                           htmlAttributes: new { @data_bind = "options: colors, optionsText: 'Text', value: selectedColor"})

        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>User Settings</legend>

                <div class="editor-field" data-bind="with: selectedColor">
                    @Html.HiddenFor(x => x.SelectedColor, new { @data_bind = "value: Value" })
                    @Html.ValidationMessageFor(model => model.SelectedColor)
                </div>

                <p>
                    <input type="submit" value="Save" />
                </p>
            </fieldset>
        }

        <h2>Unselected Colors</h2>    
        <ul data-bind="foreach: colors">
            <li data-bind="visible: Selected" class="colorItem">
                <span class="icon-arrow-right color-ind" data-bind="style: { color: Value }"></span>
                <span data-bind="text: Text"></span>
            </li>
        </ul>
    </div>
</div>

@section Scripts {   

    <script type="text/javascript">
        //The view model being used for the ui
        function ColorViewModel() {
            this.colors = @Html.Raw(Json.Encode(Model.SelectableColors));
            var sColor = '@Html.Raw(Model.SelectedColor)';
            var color, selColor;
            for (var index in this.colors) {
                color = this.colors[index];

                if (color.Value === sColor) {
                    color.Selected = ko.observable(false);
                    selColor = color;
                } else {
                    color.Selected = ko.observable(true);
                }
            }

            //Make the list of color models observable
            this.colors = ko.observableArray(this.colors);
            this.selectedColor = ko.observable();
            
            //Subscribe to the post and pre change events
            this.selectedColor.subscribe(function(oldValue) {
                if (typeof oldValue !== 'undefined') {
                    oldValue.Selected(true);
                }

            }, null, "beforeChange");

            this.selectedColor.subscribe(function(newValue) {
                newValue.Selected(false);
            });

            //Select the initial color
            if (typeof selColor !== 'undefined') {
                this.selectedColor(selColor);
            }
        }

        var model = new ColorViewModel();
        ko.applyBindings(model);
    </script>
    
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        //Sets up the client validation to ensure that the hidden field 
        //corresponds to one of the allowed values when posted
        $.validator.setDefaults({ ignore: '' });

        $.validator.addMethod('propercolor', function(value, element, params) {
            var color;
            for (var index in model.colors()) {
                color = model.colors()[index].Value;

                if (color === value) {
                    return true;
                }
            }

            return false;
        }, '');

        $.validator.unobtrusive.adapters.add('propercolor', {}, function(options) {
            options.rules['propercolor'] = true;
            options.messages['propercolor'] = options.message;
        });
    </script>
}
